<template>
  <el-dialog
    :visible="visible"
    @close="handleClose"
    :title="$t('operator.level_expired_mail')"
    width="40%"
  >
    <!--      <el-form-item>
              <el-input v-model="dataForm.operatorName" placeholder='E-mail' clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="getDataList(pageNo = 1)"></el-button>
            </el-form-item>-->
    <el-table
      :data="dataList"
      v-loading="dataListLoading"
      style="border: 0px"
      ref="multipleTable"
      height="400"
    >
      <el-table-column
        prop="configValue"
        header-align="center"
        align="center"
        :label="$t('operator.email')"
      >
      </el-table-column>
      <el-table-column
        prop="creTime"
        header-align="center"
        align="center"
        :label="$t('group.operator.creTime')"
      >
        <template v-slot="scope">
          <label>{{
            formatDate(scope.row.creTime, 'yyyy-MM-dd  hh:mm:ss')
          }}</label>
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        :label="$t('common.operate')"
      >
        <template v-slot="scope">
          <!--          <el-tooltip class="item" effect="dark" :content="$t('common.updateBtn')" placement="top">
                      <el-button @click="updateHandle(scope.row.configId)" style="color: #f8ae01" icon="el-icon-edit"></el-button>
                    </el-tooltip>-->
          <el-tooltip
            class="item"
            effect="dark"
            :content="$t('common.deleteBtn')"
            placement="top"
          >
            <el-button
              style="color: #dc143c"
              @click="deleteHandle(scope.row.configId, scope.row.configValue)"
              type="text"
            >
              <i class="el-icon-delete"></i>
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">{{
        $t('common.cancel')
      }}</el-button>

      <el-popover placement="top" width="300" v-model="addEmailVisible">
        <div style="text-align: left; margin: 0">
          <el-form :model="dataForm" @close="cancelEmailHandle">
            <el-input
              v-model="dataForm.email"
              :placeholder="$t('common.email')"
              style="width: 250px; padding: 8px"
              maxlength="120"
              @blur="() => (dataForm.email = dataForm.email.trim())"
              clearable
            ></el-input>

            <div align="center" style="margin: 10px 0 10px 0">
              <span>
                <el-button
                  size="mini"
                  type="danger"
                  @click="cancelEmailHandle"
                  >{{ $t('common.cancel') }}</el-button
                >
                <el-button
                  type="primary"
                  size="mini"
                  :loading="addEmailLoading"
                  @click="addEmailHandle()"
                  >{{ $t('common.confirm') }}</el-button
                >
              </span>
            </div>
          </el-form>
        </div>
        <el-button
          v-if="isAuth('10680202.MANAGE')"
          type="primary"
          size="small"
          class="ml-4"
          slot="reference"
          icon="el-icon-plus"
        ></el-button>
      </el-popover>
    </span>
  </el-dialog>
</template>

<script>
import { formatDate } from '@/utils/formatDate'
import {
  getRemindEmail,
  saveRemindEmail,
  deleteRemindEmail
} from '@/api/operator'

export default {
  data() {
    return {
      visible: false,
      comfirmLoading: false,
      addEmailVisible: false,
      addEmailLoading: false,
      dataForm: {
        email: ''
      },
      dataList: [],
      dataListLoading: false,
      pageNo: 1,
      pageSize: 10,
      rows: 0
    }
  },
  created() {},
  methods: {
    init() {
      this.visible = true
      this.dataList = []
      this.pageNo = 1
      this.getDataList()
    },
    cancel() {
      this.visible = false
      this.$emit('close')
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageNo = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      console.log(val)
      this.pageNo = val
      this.getDataList()
    },
    formatDate(cellValue, fmt) {
      cellValue = new Date(cellValue).valueOf()
      return formatDate(cellValue, fmt)
    },
    getDataList() {
      this.dataListLoading = true
      let params = {
        operatorName: this.dataForm.operatorName,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      console.log(params)
      this.dataListLoading = true
      getRemindEmail()
        .then((data) => {
          this.dataListLoading = false
          console.log(data)
          this.dataList = data
          this.rows = data.rows
        })
        .catch((e) => {
          this.$confirmError(e)
          this.loading = false
          this.dataListLoading = false
        })
    },
    handleClose() {
      this.dataForm.email = ''
      this.visible = false
      this.comfirmLoading = false
    },
    addEmailHandle() {
      const entity = {
        configValue: this.dataForm.email
      }
      this.addEmailLoading = true
      saveRemindEmail(entity)
        .then((data) => {
          this.getDataList()
          this.addEmailLoading = false
          this.addEmailVisible = false
          this.dataForm.email = ''
        })
        .catch((e) => {
          this.$confirmError(e)
          this.addEmailLoading = false
        })
    },
    cancelEmailHandle() {
      this.addEmailVisible = false
      this.dataForm.email = ''
    },
    updateHandle(id) {},
    deleteHandle(id, email) {
      this.$confirm(this.$t('operator.tipDeleteEmail', { email: email }), '', {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel')
      }).then(() => {
        deleteRemindEmail(id)
          .then((data) => {
            this.getDataList()
          })
          .catch((err) => {
            this.$confirmError(err)
          })
      })
    }
  }
}
</script>
